<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <title>后台登录</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/admin/admin-lte/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/admin/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="/admin/admin-lte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/admin/admin-lte/plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="/admin/elementUI/css/index.css">
</head>
<body class="hold-transition login-page" style="height: auto">
<div class="login-box">
    <div class="login-logo">
        <a href="javascript:;">后台管理系统</a>
    </div>
    <div class="login-box-body" v-loading="loading">
        <p class="login-box-msg">Sign in to start your session</p>

        <div class="form-group has-feedback">
            <input type="email" class="form-control" placeholder="Username" v-model="username">
            <span class="glyphicon glyphicon-user form-control-feedback"></span>
        </div>
        <div class="form-group has-feedback">
            <input type="password" class="form-control" placeholder="Password" v-model="password">
            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
        </div>
        <div class="row">
            <div class="col-xs-offset-8 col-xs-4">
                <button class="btn btn-primary btn-block btn-flat" @click="submit">登录</button>
            </div>
        </div>


    </div>
</div>
<script src="/admin/admin-lte/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="/admin/admin-lte/bootstrap/js/bootstrap.min.js"></script>
<script src="/admin/admin-lte/plugins/iCheck/icheck.min.js"></script>
<script src="/admin/vue/vue.js"></script>
<script src="/admin/elementUI/js/index.js"></script>
<script src="/admin/js/md5.js"></script>
<script>
    var vm = new Vue({
        el: '.login-box',
        data: function() {
            return {
                username: '',
                password:'',
                loading:false
            }
        },
        methods:{
            submit:function () {
                var username=this.username;
                var password=this.password;
                if(username == ''){
                    this.$message({
                        message: '请输入用户名',
                        type: 'warning'
                    });
                    return;
                }
                if(password == ''){
                    this.$message({
                        message: '请输入密码',
                        type: 'warning'
                    });
                    return;
                }
                password = md5(password);
                var _this = this;
                this.loading = true;
                $.ajax({
                    type:"POST",
                    url:"/backend/auth/login",
                    dataType:"json",
                    data: {
                        username:username,
                        password:password
                    },
                    success:function(result){
                        if(result.code===0){
                            _this.$message({
                                message: result.msg,
                                type: 'success'
                            });
                            setTimeout(function () {
                                window.location.href='/backend';
                            },1500);
                            return;
                        }else if(result.code ===-1){
                            _this.$message({
                                message: result.msg,
                                type: 'warning'
                            });
                        }else if(result.code ===-2){
                            _this.$message({
                                message: result.msg,
                                type: 'error'
                            });
                        }
                        _this.loading = false;
                    },
                    error:function () {
                        _this.loading = false;
                        _this.$message({
                            message: '调用接口失败',
                            type: 'error'
                        });
                    }
                });
            }
        }
    });
    $(window).bind("keypress",function(e){
        // 兼容FF和IE和Opera
        var theEvent = e || window.event;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
            vm.submit();
        }
    });
</script>
</body>
</html>